﻿@model IDictionary<string, object>

@using SmartStore.Web.Framework.Theming;
@using SmartStore.Web.Framework.UI;

@{
	Layout = null;
}

@(Html.SmartStore().TabStrip().Name("theme-flex-edit").Style(TabsStyle.Material).HtmlAttributes(new { @class = "theme-edit" }).Items(x =>
{
	var tabGeneral = x.Add().Text(T("Common.General").Text).Content(@TabGeneral()).Selected(true);
	var tabFonts = x.Add().Text(T("Admin.Themes.Fonts").Text).Content(@TabFonts());
	var tabLayout = x.Add().Text(T("Admin.Themes.Sections").Text).Content(@TabLayout());
	var tabComponents = x.Add().Text(T("Admin.Themes.Components").Text).Content(@TabComponents());
	var tabMisc = x.Add().Text(T("Admin.Themes.Misc").Text).Content(@TabMisc());

}))

@helper TabGeneral()
{
	<div class="adminContent">
		@ThemeVarEditor("gray-100", "Grayscale")
		@ThemeVarEditor("gray-200")
		@ThemeVarEditor("gray-300")
		@ThemeVarEditor("gray-400")
		@ThemeVarEditor("gray-500")
		@ThemeVarEditor("gray-600")
		@ThemeVarEditor("gray-700")
		@ThemeVarEditor("gray-800")
		@ThemeVarEditor("gray-900")

		@ThemeVarEditor("red", "Colors")
		@ThemeVarEditor("orange")
		@ThemeVarEditor("yellow")
		@ThemeVarEditor("green")
		@ThemeVarEditor("blue")
		@ThemeVarEditor("bluegrey")
		@ThemeVarEditor("indigo")
		@ThemeVarEditor("teal")
		@ThemeVarEditor("cyan")
		@ThemeVarEditor("pink")
		@ThemeVarEditor("purple")

		@ThemeVarEditor("primary", "Brand Colors")
		@ThemeVarEditor("secondary")
		@ThemeVarEditor("warning")
		@ThemeVarEditor("danger")
		@ThemeVarEditor("info")
		@ThemeVarEditor("success")
		@ThemeVarEditor("light")
		@ThemeVarEditor("dark")

		@ThemeVarEditor("boxed", "Layout", T("Admin.ThemeVar.Boxed"))

		@ThemeVarEditor("body-bg", "Site Colors")
		@ThemeVarEditor("site-bg")
		@ThemeVarEditor("body-color")
		@ThemeVarEditor("yiq-text-dark")
		@ThemeVarEditor("yiq-text-light")
		@ThemeVarEditor("text-muted")
		@ThemeVarEditor("link-color")

		@ThemeVarEditor("btn-secondary-bg", "")
		@ThemeVarEditor("btn-secondary-border")
	</div>
}

@helper TabFonts()
{
	<div class="adminContent">
		@ThemeVarEditor("font-family-sans-serif", "Typo")
		@ThemeVarEditor("font-family-monospace")
		@ThemeVarEditor("font-size-base")
		@ThemeVarEditor("font-size-lg")
		@ThemeVarEditor("font-size-sm")
		@ThemeVarEditor("font-size-xs")
		@ThemeVarEditor("font-weight-light")
		@ThemeVarEditor("font-weight-normal")
		@ThemeVarEditor("font-weight-medium")
		@ThemeVarEditor("font-weight-bold")

		@ThemeVarEditor("headings-font-family", "Headings")
		@ThemeVarEditor("headings-font-weight")
		@ThemeVarEditor("headings-line-height")
		@ThemeVarEditor("headings-color")
		@ThemeVarEditor("lead-font-weight")

		@ThemeVarEditor("h1-font-size", "Heading Sizes")
		@ThemeVarEditor("h2-font-size")
		@ThemeVarEditor("h3-font-size")
		@ThemeVarEditor("h4-font-size")
		@ThemeVarEditor("h5-font-size")
		@ThemeVarEditor("h6-font-size")

		<div class="adminRow">
			<div class="admin-config-group">
				<div class="title">Google Fonts</div>
			</div>
		</div>

		<div class="adminRow">
			<div class="alert alert-info w-100">
				@T("Admin.Theme.GoogleFonts.Hint")
			</div>
		</div>

		@ThemeVarEditor("google-font-1")
		@ThemeVarEditor("google-font-2")
		@ThemeVarEditor("google-font-3")
	</div>
}

@helper TabLayout()
{
	<div class="adminContent">
		@ThemeVarEditor("header-bg", "Header")
		@ThemeVarEditor("shopbar-label")

		@ThemeVarEditor("inverse-menubar", "")
		@ThemeVarEditor("menubar-bg")
		@ThemeVarEditor("menubar-color")
		@ThemeVarEditor("menubar-inverse-color")

		@ThemeVarEditor("inverse-shopbar", "")
		@ThemeVarEditor("shopbar-bg")
		@ThemeVarEditor("shopbar-color")
		@ThemeVarEditor("shopbar-inverse-color")

		@ThemeVarEditor("inverse-navbar", "")
		@ThemeVarEditor("megamenu-bg")
		@ThemeVarEditor("megamenu-color")
		@ThemeVarEditor("megamenu-inverse-color")
		@ThemeVarEditor("megamenu-line-height")

		@ThemeVarEditor("megamenu-dropdown-bg")
		@ThemeVarEditor("megamenu-heading-color")
		@ThemeVarEditor("megamenu-subitem-color")
		@ThemeVarEditor("megamenu-text-color")
		@ThemeVarEditor("megamenu-rotator-bg")

		@ThemeVarEditor("searchbox-bg", "Searchbox")
		@ThemeVarEditor("searchbox-focus-bg")
		@ThemeVarEditor("searchbox-border-color")
		@ThemeVarEditor("searchbox-border-active-color")
		@ThemeVarEditor("search-button-style")
		@ThemeVarEditor("search-button-flat")
		@ThemeVarEditor("searchbox-hit-tag-color")

		@ThemeVarEditor("inverse-footer", "Footer")
		@ThemeVarEditor("footer-bg")
		@ThemeVarEditor("footer-color")
		@ThemeVarEditor("footer-color-muted")
		@ThemeVarEditor("footer-inverse-color")
		@ThemeVarEditor("footer-inverse-color-muted")
		@ThemeVarEditor("footer-social-bg")
		@ThemeVarEditor("footer-social-color")
	</div>
}

@helper TabComponents()
{
	<div class="adminContent">
		@ThemeVarEditor("card-border-radius", "Cards")
		@ThemeVarEditor("card-border-color")
		@ThemeVarEditor("card-cap-bg")
		@ThemeVarEditor("card-bg")

		@ThemeVarEditor("dropdown-bg", "Dropdowns")
		@ThemeVarEditor("dropdown-border-color")
		@ThemeVarEditor("dropdown-border-radius")
		@ThemeVarEditor("dropdown-divider-bg")
		@ThemeVarEditor("dropdown-box-shadow")
		@ThemeVarEditor("dropdown-link-color")
		@ThemeVarEditor("dropdown-link-hover-color")
		@ThemeVarEditor("dropdown-link-hover-bg")

		@ThemeVarEditor("table-bg", "Tables")
		@ThemeVarEditor("table-accent-bg")
		@ThemeVarEditor("table-hover-bg")
		@ThemeVarEditor("table-active-bg")
		@ThemeVarEditor("table-border-color")
	</div>
}

@helper TabMisc()
{
	<div class="adminContent">
		@ThemeVarEditor("nav-tabs-active-link-color")
		@ThemeVarEditor("product-price-color")
		@ThemeVarEditor("product-detail-addtocart-box-bg")
		@ThemeVarEditor("login-box-bg")
		@ThemeVarEditor("cart-footer-bg")
		@ThemeVarEditor("costep-progress-color", null, T("Admin.ThemeVar.CostepPogressColor"))
		@ThemeVarEditor("offcanvas-cart-footer")
		@ThemeVarEditor("art-active-bg-color", null, T("Admin.ThemeVar.ArtActiveBgColor"))
		@ThemeVarEditor("art-active-border-color", null, T("Admin.ThemeVar.ArtActiveBorderColor"))
	</div>
}

@helper ThemeVarEditor(string varName, string groupName = null, string helpText = null)
{
	if (groupName != null)
	{
		<div class="adminRow">
			<div class="admin-config-group">
				<div class="title">@groupName</div>
			</div>
		</div>

	}
	
	<div class="adminRow">
		<div class="adminTitle">
			@Html.ThemeVarLabel(ThemeManifest.Variables[varName], helpText)
		</div>
		<div class="adminData">
			@Html.ThemeVarEditor(ThemeManifest.Variables[varName], Model[varName])	
		</div>
		<div class="d-none d-xl-flex align-items-center">
			@Html.ThemeVarChainInfo(ThemeManifest.Variables[varName])
		</div>
	</div>
}
